<template>
  <div class="main">
    <div class="upload">
      <div class="upload-title">请上传待识别图片：（最多上传6张图片）</div>
      <div class="tip">请提示上传成功后再查看结果！</div>
      <div class="upload-pic">
        <el-upload
            action="/crop/temporary/save"
            list-type="picture-card"
            :on-change="change"
            :limit="6"
            :on-success="success"
        >
          <i v-if="" slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
              <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
              >
            <span class="el-upload-list__item-actions my-container">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
              >
              <i class="el-icon-zoom-in"></i>
              </span>
              <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleIdentify(file)"
              >
                <i class="el-icon-view"></i>
              </span>

              <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
    </div>
    <div :class="resultClass">
      <div class="dis-name">
        农作物名称：{{showDis.cropName}}
      </div>
      <div class="dis-name">
        病害名称：{{showDis.diseaseName}}
      </div>
      <div class="dis-info">
        严重程度：<span style="color: darkorange">{{showDis.diseaseLevel}}</span>
      </div>
      <div class="dis-info">
        病害详情：{{showDis.diseaseInfo}}
      </div>
      <div class="dis-info">
        解决办法：{{showDis.diseaseSolve}}
      </div>
      <div class="save">
        点击收藏：
        <a v-show="showDis.isSave" href="javascript:" class="el-icon-star-on"></a>
        <a v-show="!showDis.isSave" href="javascript:" class="el-icon-star-off" @click="save"></a>
      </div>
    </div>
  </div>

</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "UploadPic",
  data() {
    return {
      dialogImageUrl: '',
      num:3,
      dialogVisible: false,
      disabled: false,
      fileList:[],
      resultClass:['result'],
      showDis:{
        id:'',
        isSave:false,
        cropName:'',
        diseaseName:'',
        diseaseLevel:'',
        diseaseInfo:'',
        diseaseSolve:''
      }
    };
  },
  methods: {
    change(file,fileList){
      const isJPG = file.name.endsWith(".JPG") || file.name.endsWith(".jpg");
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上图片只能是 JPG 格式!');
        fileList.pop()
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过2MB!');
      }else{
        this.fileList = fileList
      }

    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      this.fileList.splice(index,1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleIdentify(file) {
      this.resultClass.pop()
      this.resultClass.push('showResult')
      let that = this
      console.log(this.currentDis)
      this.currentDis.forEach(function (item){
        if (item.id === file.response.data.id){
          that.showDis.cropName = item.crop_name
          that.showDis.id = item.id
          that.showDis.isSave = item.isSave
          that.showDis.diseaseName = item.disease_name
          that.showDis.diseaseSolve = item.disease_resolve
          that.showDis.diseaseInfo = item.disease_info
          that.showDis.diseaseLevel = item.disease_level
        }
      })
    },
    async success(response, file, fileList){
      await this.saveDis(response.data.id)
      this.$message.success(response.msg)
    },
    save(){
      if (this.loginUser.isLogin){

      }else {
        this.$notify.error({
          title: '错误',
          message: '请登录，登陆后可收藏'
        });
      }
    },
    ...mapActions('disease',['saveDis'])
  },
  computed:{
    ...mapState('disease',['currentDis']),
    ...mapState('user',['loginUser'])
  }
}
</script>

<style scoped>
.main{
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}

.upload {
  float: left;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.1);
  width: 47%;
  border-radius: 20px;
  height: 500px;
}

.result {
  float: left;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.1);
  width: 47%;
  border-radius: 20px;
  transform: translateX(100%);
  opacity: 0;
  transition: all .3s linear;
}

.showResult{
  float: left;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.1);
  width: 47%;
  border-radius: 20px;
  transform: translateX(0);
  opacity: 1;
  transition: all .3s linear;
}

.upload-title {
  font-size: 25px;
  margin: 20px 20px;
}

.tip{
  color: red;
  margin: 20px 20px 40px 20px;
}

.dis-name{
  font-size: 25px;
  margin: 20px 20px;
}

.dis-info{
  font-size: 20px;
  margin: 20px 20px;
}

.upload-pic {
  margin: 40px 20px;
  width: 100%;
  display: flex;
  height: 310px;
  overflow: hidden;
}

.my-container{
  width: 400px;
}

.save{
  margin: 0 30px;
  text-align: right;
  color: darkorange;
}
</style>